/**
 * Created by maxiaoqiang on 2018/6/22.
 */
import React, {Component} from 'react';
import {Link} from "react-router-dom";
import {Form, Icon, Input, Button, Row, Col, notification, message} from 'antd';
const FormItem = Form.Item;

import HomeLogo from "component/homeLogo";

import "./index.less";

import md5 from "md5";
import {HttpClient} from "util/HttpClient";

let time = 60;
class Register extends Component {

    constructor(props) {
        super(props);
        this.state={
            click:false,
            title:"获取验证码",
            time:59
        }
    }


    sendCode = ()=> {
        var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$");
        var username = this.userName.props.value;
        if (username == undefined || username.trim().length == 0) {
            notification.open({
                message: '警告',
                description: '邮箱不能为空',
                duration: 2
            })
        } else if (!reg.test(username)) {
            notification.open({
                message: '警告',
                description: '邮箱格式不正确',
                duration: 2
            })
        } else {
            if(!this.state.click){
                this.countDown();
                HttpClient.post("/v1/sendcode",{
                        userName:username
                    })
                    .then((response)=>{
                        var data = response.data;
                        if(data.code==200){
                            message.success('验证码发送成功, 请登录邮箱查看');
                        }else if(data.code==501){
                            message.warning('邮箱已注册, 请前往登录');
                        }else{
                            message.error('服务器错误, 请稍后重试');
                        }
                    })
            }

        }
    };

    handleRegister = ()=> {
        const {validateFields} = this.props.form;
        validateFields((error, values)=> {
            if(!error){
                HttpClient.post("/v1/register",{
                    userName:values.userName,
                    code:values.code,
                    password:md5(values.password)
                })
                    .then((response)=>{
                        var data = response.data;
                        console.log(data)
                        if(data.code==200){
                            message.success('注册成功, 请前往登录');
                        }else{
                            message.warning(data.msg);
                        }
                    })
            }
        });
    };

    countDown=()=>{
        time--;
        this.setState({
            title:time+"s后获取",
            click:true
        });
        var timeDown = setInterval(()=>{
            time--;
            this.setState({
                title:time+"s后获取"
            });
            if(time==0){
                time = 60;
                this.setState({
                    title:"获取验证码",
                    click:false
                });
                clearInterval(timeDown);
            }
        }, 1000);
    };


    render() {
        const {getFieldDecorator} = this.props.form;
        return (
            <div className="user-div">
                <div className="form-div">
                    <HomeLogo/>
                    <Form onSubmit={this.handleRegister}>
                        <FormItem hasFeedback>
                            {getFieldDecorator('userName', {
                                rules: [
                                    {
                                        required: true,
                                        type: 'email',
                                        message: '请输入正确的邮箱'
                                    }
                                ]
                            })(
                                <Input
                                    ref={ref=>this.userName=ref}
                                    prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                    placeholder="邮箱"
                                />
                            )}
                        </FormItem>
                        <FormItem >
                            <Row gutter={8}>
                                <Col span={14}>
                                    {getFieldDecorator('code', {
                                        rules: [
                                            {
                                                required: true,
                                                message: '请输入验证码'
                                            }
                                        ]
                                    })(
                                        <Input
                                            type="text"
                                            placeholder="验证码"
                                        />
                                    )}
                                </Col>
                                <Col span={6}>
                                    <Button
                                        onClick={this.sendCode}
                                        disabled={this.state.click?'disabled':''}
                                    >{this.state.title}</Button>
                                </Col>
                            </Row>
                        </FormItem>
                        <FormItem hasFeedback>
                            {getFieldDecorator('password', {
                                rules: [
                                    {
                                        required: true,
                                        message: '请输入密码'
                                    }
                                ]
                            })(
                                <Input
                                    prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                    type="password"
                                    placeholder="密码"
                                />
                            )}
                        </FormItem>
                        <FormItem>
                            <Button type="primary" htmlType="submit" className="login-form-button">
                                注册
                            </Button>
                            <div className="login-form-login">
                                已有账号，<Link to="/login">去登录</Link>
                            </div>
                        </FormItem>
                    </Form>
                </div>
            </div>
        )
    }
}

export default Form.create()(Register);